<template>
	<view class="">
		<cu-custom :isBack="true">
			<block slot="backText">
				{{deviceName}}
			</block>
		</cu-custom>
		<map :subkey="qqMapKey" v-if="isShowMap" id="myMap" style="width: 100%;"
			:style="{'height': fullMap ? '80vh':'400rpx'}" :scale="8" :longitude="lng" :latitude="lat"
			:markers="markers"></map>
		<view style="font-size: 50rpx;text-align: center;"
			:class="fullMap ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'" @tap="fullMap=!fullMap"></view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('show')+$t('time')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="showTime" @change="showTimeChange"></switch>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="scrollStyle">
			<view class="cu-timeline" v-for="(item,index) in deviceLocalList" :key="index">
				<view class="cu-time" v-if="item.status=='OFFLINE'">{{$t('precision')}}:{{item.radius}}</view>
				<view class="cu-item cuIcon-attentionfill" :style="[{color:themeConfig.primaryColor}]">
					<view class="content" style="background-color:#f8f8f8;">
						<view class="flex justify-between align-center">
							<view style="flex-basis:90%;" @tap="tapMarker(item)">
								<text class="text-gray text-lg">{{item.address}}</text>
								<view class="text-sm">{{formatDateTime(item.timestamp)}}</view>
							</view>
							<view @tap="navigation(item)">
								<text class="cuIcon-footprint" style="font-size: 44rpx;"
									:style="[{color:themeConfig.primaryColor}]"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-modal" :class="[isShowAuthorizeModal ?'show':'']">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{$t('authorize')}}</view>
					<view class="action" @tap="hideAuthorizeModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{$t('leadGoAuthorizeTip')}}
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green"
							:style="[{borderColor:themeConfig.primaryColor,color:themeConfig.primaryColor}]"
							@tap="hideAuthorizeModal">{{$t('cancel')}}</button>
						<button class="cu-btn bg-green margin-left"
							:style="[{backgroundColor:themeConfig.primaryColor}]" open-type="openSetting"
							@opensetting='authorizeManage'>{{$t('confirm')}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showLoading,
		hideLoading
	} from '@/util/toast.js'
	import myConfig from '@/myConfig.js'
	import * as deviceLocalApi from '@/api/iot/iotDeviceLocalApi.js'
	import {
		formatDateTime,
		formatTime
	} from '@/util/formatTime.js'
	import * as storage from '@/util/storage.js'
	import {nextTick} from 'vue'
	export default {
		data() {
			return {
				customBarHeight: storage.getCustomBarHeight(),
				scrollStyle: '',
				isShowMap: false,
				lng: storage.getLng(),
				lat: storage.getLat(),
				markers: [],
				deviceLocalList: [],
				deviceName: '',
				deviceCore: '',
				currentPage: 1,
				pageSize: 99,
				isShowAuthorizeModal: false,
				navigationItem: null,
				qqMapKey: myConfig.app.qqMapKey,
				fullMap: false,
				showTime: true,
				dataList: null
			}
		},
		onLoad(option) {
			this.initOption = option
		},
		onShow() {
			this.init()
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		methods: {
			formatDateTime(time) {
				return formatDateTime(time, this.$t('unKnow'))
			},
			showTimeChange() {
				this.showTime = !this.showTime
				this.makeMarker()
			},
			init() {
				this.deviceName = this.initOption.deviceName
				this.deviceCore = this.initOption.deviceCore
				this.getDeviceLocal();
			},
			getDeviceLocal() {
				deviceLocalApi.getDeviceLocal({
					deviceCore: this.deviceCore,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					if (res.data) {
						this.dataList = res.data.data
						this.makeMarker()
					}
				})
			},
			makeMarker() {
				const data = this.dataList
				const markers = []
				const deviceLocalList = []
				for (let i = 0; i < data.length; i++) {
					const item = data[i]
					const latLng = {
						lat: item.lat,
						lng: item.lng,
					}
					const marker = {
						width: 25,
						height: 25,
						latitude: latLng.lat,
						longitude: latLng.lng,
						iconPath: `${myConfig.app.baseUrl}/file/download/static/iot/uni/map/numsImage/${this.$store.state.themeConfig.theme}/marker.png`,
						label: this.showTime ? {
							width: 180,
							height: 25,
							borderWidth: 1,
							borderRadius: 5,
							color: '#FFF',
							bgColor: this.$store.state.themeConfig.primaryColor,
							content: formatDateTime(item.timestamp, this.$t('unKnow'))
						} : null,
					}
					markers.push(marker)
					deviceLocalList.push({
						timestamp: item.timestamp,
						radius: item.radius + '米',
						address: item.address,
						lat: latLng.lat,
						lng: latLng.lng
					})
				}

				this.markers = markers
				this.deviceLocalList = deviceLocalList
				this.isShowMap = true
				const screenHeight = storage.getScreenHeight()
				const mapHeight = storage.getMapHeight()
				if (mapHeight) {
					//#ifdef MP-WEIXIN
					this.scrollStyle = `height:${screenHeight - mapHeight - this.customBarHeight}px`
					//#endif
					//#ifdef H5 || APP-PLUS
					this.scrollStyle =
						`height:calc(${screenHeight}px - ${mapHeight}rpx - ${this.customBarHeight}px)`
					//#endif
				} else {
					nextTick(() => {
						setTimeout(() => {
							//#ifdef MP-WEIXIN
							uni.createSelectorQuery().select('#myMap').boundingClientRect((
								e) => {
								const height = e.height
								this.scrollStyle =
									`height:${screenHeight - height - this.customBarHeight}px`
								storage.setMapHeight(height)
							}).exec()
							//#endif
							//#ifdef H5 || APP-PLUS
							this.scrollStyle =
								`height:calc(${screenHeight}px - 400rpx - ${this.customBarHeight}px)`
							storage.setMapHeight(400)
							//#endif
						}, 200)
					})
				}
			},
			tapMarker(item) {
				const latLng = {
					lat: item.lat,
					lng: item.lng
				}
				this.lat = latLng.lat
				this.lng = latLng.lng
				const marker = {
					width: 25,
					height: 25,
					latitude: latLng.lat,
					longitude: latLng.lng,
					iconPath: `${myConfig.app.baseUrl}/file/download/static/iot/uni/map/numsImage/${this.$store.state.themeConfig.theme}/marker.png`,
					label: {
						width: 180,
						height: 25,
						borderWidth: 1,
						borderRadius: 5,
						color: '#FFF',
						bgColor: this.$store.state.themeConfig.primaryColor,
						content: formatDateTime(item.timestamp, this.$t('unKnow'))
					},
				}
				this.markers = [marker]
			},
			navigation(e) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: e.lat,
					longitude: e.lng,
					name: this.deviceName,
					address: e.address,
				})
			},
			showAuthorizeModal() {
				this.isShowAuthorizeModal = true
			},
			hideAuthorizeModal() {
				this.isShowAuthorizeModal = false
			},
			authorizeManage(e) {
				let authSetting = e.detail.authSetting
				if (authSetting['scope.userLocation']) {
					let navigationItem = this.navigationItem
					this.hideAuthorizeModal()
					this.navigation(navigationItem)
				}
			}
		},
		onShareAppMessage(res) {
			let deviceName = this.deviceName
			let deviceCore = this.deviceCore
			let nickName = storage.getNickName()
			return {
				title: `${nickName}${this.$t('share')}${deviceName}`,
				path: `/pages/deviceLocal/deviceLocal?deviceName=${deviceName}&deviceCore=${deviceCore}`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style>
</style>
